/*=================================
        ABOUT
=================================*/

.about{

width:90%;

margin:110px auto;

}

.about-title{

text-align:center;

margin-bottom:60px;

}

.about-title h2{

font-size:42px;

color:#d4af37;

margin-bottom:15px;

}

.about-title p{

color:#000000;

font-size:18px;

}

.about-box{

display:grid;

grid-template-columns:380px 1fr;

gap:60px;

align-items:center;

background:#181818;

padding:55px;

border-radius:30px;

border:1px solid rgba(212,175,55,.15);

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:320px;

height:370px;

border-radius:50%;

object-fit:cover;

padding:8px;

background:#fff;

border:4px solid #d4af37;

box-shadow:

0 0 35px rgba(212,175,55,.35);

transition:.4s;

}

.about-image img:hover{

transform:scale(1.05) rotate(6deg);

}

.about-content h3{

font-size:32px;

color:#FFD700;

margin-bottom:25px;

}

.about-content p{

font-size:18px;

color:#ddd;

line-height:2.3;

margin-bottom:25px;

text-align:justify;

}

.about-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:35px;

}

.feature{

display:flex;

align-items:center;

gap:15px;

padding:18px;

background:#222;

border-radius:18px;

transition:.35s;

border:1px solid rgba(212,175,55,.15);

}

.feature:hover{

transform:translateY(-8px);

background:#2b2b2b;

box-shadow:0 15px 35px rgba(212,175,55,.15);

}

.feature i{

font-size:28px;

color:#FFD700;

}

.feature span{

font-size:17px;

font-weight:600;

color:#fff;

}

@media(max-width:900px){

.about-box{

grid-template-columns:1fr;

text-align:center;

}

.about-content p{

text-align:right;

}

.about-image img{

width:250px;

height:250px;

}

.about-features{

grid-template-columns:1fr;

}

}
/*=================================
        RESPONSIVE
=================================*/

/* مانیتورهای بزرگ */
@media (min-width:1400px){

.about{

max-width:1400px;

}

.about-box{

padding:70px;

gap:80px;

}

.about-content h3{

font-size:40px;

}

.about-content p{

font-size:20px;

}

}


/* لپ تاپ */
@media (max-width:1200px){

.about-box{

grid-template-columns:320px 1fr;

gap:40px;

padding:40px;

}

.about-image img{

width:280px;

height:280px;

}

}


/* تبلت */
@media (max-width:992px){

.about{

width:95%;

}

.about-box{

grid-template-columns:1fr;

text-align:center;

padding:35px;

}

.about-image{

margin-bottom:20px;

}

.about-image img{

width:240px;

height:240px;

}

.about-content h3{

font-size:30px;

}

.about-content p{

text-align:right;

font-size:17px;

line-height:2.2;

}

.about-features{

grid-template-columns:repeat(2,1fr);

}

}


/* موبایل */
@media (max-width:768px){

.about{

margin:70px auto;

}

.about-title h2{

font-size:30px;

}

.about-title p{

font-size:16px;

}

.about-box{

padding:25px;

border-radius:20px;

}

.about-image img{

width:180px;

height:180px;

}

.about-content h3{

font-size:24px;

text-align:center;

}

.about-content p{

font-size:15px;

line-height:2;

}

.about-features{

grid-template-columns:1fr;

gap:15px;

}

.feature{

padding:15px;

}

.feature i{

font-size:24px;

}

.feature span{

font-size:15px;

}

}


/* موبایل های خیلی کوچک */
@media (max-width:480px){

.about{

width:96%;

}

.about-box{

padding:18px;

}

.about-image img{

width:150px;

height:180px;

}

.about-title h2{

font-size:26px;

}

.about-content h3{

font-size:21px;

}

.about-content p{

font-size:14px;

line-height:1.9;

}

.feature{

padding:12px;

}

.feature i{

font-size:20px;

}

.feature span{

font-size:14px;

}

}